import React from 'react'
import './AI.css'
import { useNavigate } from 'react-router-dom'

function Index() {
    const nav=useNavigate()
     return (
    <div className="ai">
      <section className="top-card">
        <div>  
          <div className="tc-title">AI 数字人工作台</div>
          <div className="tc-sub">一键配置 · 快速生成 · 支持ASR/LLM/TTS全链路</div>
        </div>
        <div className="tc-actions">
          <button className="btn primary" onClick={()=>nav('/num')}>了解更多数字人</button>
        </div>
      </section>
      <section className="flow">
        <div className="flow-title">语音交互驱动数字人流程</div>
        <div className="flow-sub">ASR 识别 → 大模型交互 → TTS 合成 → 数字人渲染</div>
        <div className="flow-grid">
          <div className="user">
            <div className="avatar" />
          </div>

          <div className="card asr">
            <div className="icon">ASR</div>
            <div className="info">
              <div className="title">语音识别（ASR）</div>
              <div className="desc">将语音转成文本，支持流式识别</div>
            </div>
          </div>

          <div className="card llm">
            <div className="icon">LLM</div>
            <div className="info">
              <div className="title">AI交互处理（大模型）</div>
              <div className="desc">理解意图，生成多轮对话与指令</div>
            </div>
          </div>

          <div className="card tts">
            <div className="icon">TTS</div>
            <div className="info">
              <div className="title">语音/情绪合成（TTS）</div>
              <div className="desc">根据文本生成拟人化语音，支持情绪与说话速率</div>
            </div>
          </div>

          <div className="card dh-card">
            <div className="icon">DH</div>
            <div className="info dh">
              <div className="title">数字人渲染</div>
              <div className="dh-row">
                <div className="thumb">UE 3D数字人</div>
                <div className="thumb">2D数字人</div>
              </div>
            </div>
          </div>
        </div>

        <svg className="flow-svg" viewBox="0 0 1200 420" preserveAspectRatio="none">
          <defs>
            <marker id="arrowhead" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
              <path d="M0,0 L6,3 L0,6 Z" fill="#69b1ff" />
            </marker>
          </defs>
          <path className="arrow" d="M150 210 C 250 210, 260 120, 360 120" markerEnd="url(#arrowhead)" />
          <text className="label" x="240" y="145">音频</text>
          <path className="arrow" d="M520 120 C 600 120, 640 120, 720 120" markerEnd="url(#arrowhead)" />
          <text className="label" x="620" y="105">文本</text>
          <path className="arrow" d="M880 120 C 960 120, 1000 120, 1080 120" markerEnd="url(#arrowhead)" />
          <text className="label" x="980" y="105">文本</text>
          <path className="arrow" d="M880 300 C 960 300, 1000 300, 1080 300" markerEnd="url(#arrowhead)" />
          <text className="label" x="960" y="290">驱动</text>
          <path className="arrow" d="M1080 300 C 980 360, 320 360, 150 260" markerEnd="url(#arrowhead)" />
          <text className="label" x="520" y="355">合成音视频</text>
        </svg>
      </section>
    </div>
  )
}

export default Index
